<template>
  <div class="member">
    <div class="columns">
      <div class="column is-one-quarter">
        <el-card shadow="never">
          <div slot="header" class="has-text-centered">
            <el-avatar
              :size="64"
              :src="profile.avatar"
              :preview-src-list="[profile.avatar]"
            />
            <p class="mt-3">{{ profile.alias || profile.username }}</p>
          </div>
          <div>
            <p class="content">
              {{ $t("user.score") }}：<code>{{ profile.score }}</code>
            </p>

            <p class="content">
              {{ $t("user.join") }}：{{
                dayjs(profile.createTime).format("YYYY/MM/DD HH:MM:ss")
              }}
            </p>

            <p class="content">{{ $t("user.bio") }}：{{ profile.bio }}</p>

            <div>
              <button
                v-if="hasFollow"
                class="button is-success button-center is-fullwidth"
                @click="handleUnFollow(user.id)"
              >
                {{ $t("Author.unFollow") }}
              </button>

              <button
                v-else
                class="button is-link button-center is-fullwidth"
                @click="handleFollow(user.id)"
              >
                {{ $t("Author.follow") }}
              </button>
            </div>
          </div>
        </el-card>
      </div>

      <div class="column">
        <el-card class="box-card" shadow="never">
          <!-- 导航栏 -->
          <el-menu
            default-active="1"
            mode="horizontal"
            style="margin-top: -15px"
          >
            <el-menu-item index="1" @click="toTopic()">
              <i class="el-icon-menu"></i>
              <span slot="title">{{ $t("user.topics") }}</span>
            </el-menu-item>
            <el-menu-item index="2" @click="toFollow()">
              <i class="el-icon-star-on"></i>
              <span slot="title">{{ $t("user.follow") }}</span>
            </el-menu-item>
            <el-menu-item index="3" @click="toFans()">
              <i class="el-icon-user-solid"></i>
              <span slot="title">{{ $t("user.fans") }}</span>
            </el-menu-item>
          </el-menu>
          <!--用户发布的话题-->
          <div style="padding: 20px 0" v-if="active === 1">
            <div v-if="topics.length === 0">
              {{ $t("user.blankTopic") }}
            </div>
            <div v-else class="profile-info">
              <article
                v-for="(item, index) in topics"
                :key="index"
                class="media"
              >
                <div class="media-content">
                  <div class="content ellipsis is-ellipsis-1">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.title"
                      placement="top"
                    >
                      <router-link
                        :to="{ name: 'post-detail', params: { id: item.id } }"
                      >
                        {{ item.title }}
                      </router-link>
                    </el-tooltip>
                  </div>
                  <nav class="level has-text-grey is-size-7">
                    <div class="level-left">
                      <span class="mr-1">
                        {{ $t("post.release") }}:{{
                          dayjs(item.createTime).format("YYYY/MM/DD HH:mm:ss")
                        }}
                      </span>
                    </div>
                  </nav>
                </div>
                <div v-if="token" class="media-right">
                  <div v-if="profile.username === user.username" class="level">
                    <div class="level-item mr-1">
                      <router-link
                        :to="{ name: 'post-edit', params: { id: item.id } }"
                      >
                        <span class="tag is-warning">{{
                          $t("post.edit")
                        }}</span>
                      </router-link>
                    </div>
                    <div class="level-item">
                      <a @click="handleDelete(item.id)">
                        <span class="tag is-danger">{{ $t("post.del") }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </article>
            </div>
            <pagination
              v-show="page.total > 0"
              class="mt-5"
              :total="page.total"
              :page.sync="page.current"
              :limit.sync="page.size"
              @pagination="fetchUserById"
            />
          </div>
          <!-- 关注 -->
          <Follow v-if="active === 2" :topicUser="profile" />
          <!-- 粉丝 -->
          <Fan v-if="active === 3" :topicUser="profile" />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfoByName } from "@/api/user";
import pagination from "@/component/Pagination";
import { mapGetters } from "vuex";
import { deletePost } from "@/api/post";
import { follow, hasFollow, unFollow } from "@/api/follow";

import Follow from "@/component/Nav/Follow";
import Fan from "@/component/Nav/Fan";
export default {
  name: "Profile",
  components: { pagination, Follow, Fan },
  data() {
    return {
      hasFollow: false,
      active: 1,
      profile: {},
      topics: {},
      page: {
        current: 1,
        size: 5,
        total: 0,
      },
    };
  },
  computed: {
    ...mapGetters(["token", "user"]),
  },
  created() {
    this.fetchUserById();
  },
  methods: {
    fetchUserById() {
      getInfoByName(
        this.$route.params.username,
        this.page.current,
        this.page.size
      ).then((res) => {
        const { data } = res;
        this.profile = data.user;
        this.page.current = data.topics.current;
        this.page.size = data.topics.size;
        this.page.total = data.topics.total;
        this.topics = data.topics.records;
        if (this.token != null && this.token !== "") {
          hasFollow(this.profile.id).then((value) => {
            const { data } = value;
            this.hasFollow = data.hasFollow;
          });
        }
      });
    },
    handleDelete(id) {
      deletePost(id).then((value) => {
        const { code, message } = value;
        if (code === 200) {
          this.$message.success(message);
          setTimeout(() => {
            this.$router.push({ path: "/" });
          }, 500);
        }
      });
    },
    toTopic() {
      this.active = 1;
    },
    toFollow() {
      this.active = 2;
    },
    toFans() {
      this.active = 3;
    },
    handleFollow: function (id) {
      if (this.token != null && this.token !== "") {
        follow(this.profile.id).then((response) => {
          const { message } = response;
          this.$message.success(message);
          this.hasFollow = !this.hasFollow;
          this.profile.followerCount = parseInt(this.profile.followerCount) + 1;
        });
      } else {
        this.$message.success(this.$t("Author.login"));
      }
    },
    handleUnFollow: function (id) {
      unFollow(this.profile.id).then((response) => {
        const { message } = response;
        this.$message.success(message);
        this.hasFollow = !this.hasFollow;
        this.profile.followerCount = parseInt(this.profile.followerCount) - 1;
      });
    },
  },
};
</script>

<style scoped></style>
